<template>
	<view>
		<view class="page-body">
			<view class="uni-flex uni-column" style="justify-content: center; align-items: center;">
				<image class="uni-logo" src="http://img.deitui.com/?w=200&h=200&text=Logo&fontsize=36&textclor=fff&bgclor=ed6d53"></image>
			</view>
			
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-list uni-margin-10">
					<view class="uni-list-cell">
						<label class="list-left">
							原手机号码
						</label>
						<view class="uni-list-cell-db">
							<view class="uni-input"  >{{oldUserLoginId}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list  uni-margin-10">
					<view class="uni-list-cell">
						<label class="list-left">
							新手机号码
						</label>
						<view class="uni-list-cell-db">
								<view class="uni-cell">
										<view class="uni-cell__value">
											<input type="number" v-model="newUserLoginId" placeholder="请输入手机号码">
										</view>
										<view class="uni-icon uni-icon-close1 uni-font-size-28  uni-padding-top-15 uni-padding-bottom-15 " style="font-size: :44upx;" custom-class="uni-cell__right-icon"  v-if="newUserLoginId.length>0" @click="clearPhone"></view>
							
									</view>
						</view>
					</view>
				</view>
				
				<view class="uni-flex uni-row" style="justify-content: space-between;">
					<button class="btn-submit uni-bg-primary" formType="submit">提交</button>
					<button type="default" class="btn-reset" formType="reset">重置</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	import {updateUserLogin} from '@/api/ucenter/index'
	import {
		mapGetters,mapState 
	} from 'vuex'
	export default {
		data() {
			return {
				oldUserLoginId: "",
				newUserLoginId: "",
				delta: 1
			}
		},
		
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			}),
			...mapGetters(
				["userId"],
			),
		},
		onLoad(e) {
			if(e.delta !== undefined) {
				this.delta = this.delta + e.delta
			}
			this.oldUserLoginId = this.userInfo.userLoginId;
		},
		mounted() {
		},
		methods: {
			formSubmit: function (e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				this.save();
			},
			formReset: function (e) {
				console.log("清空数据")
				this.chosen = ''
			},
			save() {
				var that = this;
				if(this.newUserLoginId.length < 0) {
					uni.showModal({
						title:"提示",
						content:"请输入新账号"
					})
					return;
				}
				uni.showModal({
					title:"提示",
					content:"确认需要更换账号？",
					success: async function(res) {
						updateUserLogin(that.userId, {userLoginId: that.newUserLoginId}).then(res => {
							if(res.status == 200 && res.rel == true) {
								uni.showModal({
									title:"提示",
									content:"修改成功",
									success: async function(res) {
										if (res.confirm) {
											this.$store.dispatch("LogOut").then( response => {
												setTimeout(()=>{  //定时器设置每秒递减
													uni.navigateTo({
														url: "/pages/security/login?delta="+ that.delta
													})
												},60)
											})
										}
									}
										
								})
							}
						});
					}
				})
				
			}
		}
	}
</script>

<style>
	label {
		display: flex;
		flex-direction: row;
		min-width: 270upx;
		margin-right: 20upx;
	}

	.btn-submit {
		color: #ffffff;
	}
	
	.uni-list-cell {
		justify-content: flex-start;
	}

	.uni-list-cell-db,
	.list-left {
		padding: 0 24upx;
	}
	
	.btn-reset,
	.btn-submit  {
		height: 60upx;
		width: 200upx;
		font-size: 25upx;
	}
</style>
